<template>
  <div>
    <el-dialog :title="editerData.propertyKey.keyName" :visible.sync="editerData.show" width="40%" center :close-on-click-modal='false'>
        <center>
          <span v-if='editerData.selectedModel.length==0'>{{editerData.model.brand.text+' '+editerData.model.series.text+' '+editerData.model.model.text}}</span>
          <span style='color:red' v-else>已选择车型数量:{{editerData.selectedModel.length}}</span>
        </center>
        <br>
        <el-form label-position="right" label-width="100px" size="mini">
          <el-form-item label="文本">
            <!-- <el-input v-model='editerData.text' style='width:80%'></el-input> -->
            <el-autocomplete
              style='width:80%'
              class="inline-input"
              v-model="editerData.text"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="链接" v-if="editerData.propertyKey.propertyType=='URL'">
            <el-input v-model='editerData.url' style='width:80%' ></el-input>
          </el-form-item>
          <el-form-item label="图片" v-if="editerData.propertyKey.propertyType=='IMAGE'">
            <el-upload
                :limit='12'
                :action="$store.state.upload"
                :on-success="uploadSuccess"
                :on-remove='removeImage'
                :file-list="imageList"
                list-type="picture-card">
                <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button size='mini' @click="editerData.show=false">取消</el-button>
          <el-button size='mini' type="primary" @click="onsubmit">提交</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'modelProperty',
  data(){
    return {
      restaurants: [],
      imageList:[]
    };
  },
  methods:{
    onsubmit:function(){
      var params = new URLSearchParams();
      params.append('keyId',this.editerData.propertyKey.keyId);
      params.append('text',this.editerData.text);
      params.append('url',this.editerData.url);
      var count=this.editerData.selectedModel.length;
      if(count==0)params.append('modelIds',this.editerData.model.modelId);
      for(var i=0;i<count;i++)params.append('modelIds',this.editerData.selectedModel[i].modelId);
      this.$http.post(this.$store.state.url+"/updatemodelproperty",params).then(
        function(response){
          var count=this.editerData.selectedModel.length;
          if(this.editerData.text=='')this.editerData.text='-';
          if(count==0)this.editerData.model[this.editerData.propertyKey.keyId].text=this.editerData.text;
          for(var i=0;i<count;i++){
            this.editerData.selectedModel[i][this.editerData.propertyKey.keyId].text=this.editerData.text;
            this.editerData.selectedModel[i][this.editerData.propertyKey.keyId].url=this.editerData.url;
          }
          this.editerData.show=false;
          this.$message({message: '保存成功',type: 'success'});

        }.bind(this)
      ).catch(
        function(error){
          this.editerData.show=false;
          this.$message.error('保存失败');
        }.bind(this)
      );
    },
    querySearch(queryString, cb) {
      this.$http.post(this.$store.state.url+'/lenovo','keyId='+this.editerData.propertyKey.keyId).then(
        function(response){
          this.restaurants=response.data.data;
          for(var i=0;i<this.restaurants.length;i++)this.restaurants[i].value=this.restaurants[i].text;
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        }.bind(this)
      ).catch();
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    uploadSuccess:function(response,file,fileList){
      if(response!=null)this.imageList.push({name:file.url,url:response.data.filename});
      var str='';
      for(var i=0;i<this.imageList.length;i++){
          str=str+this.imageList[i].url+',';
      }
      if(str!="")str=str.substring(0,str.length-1);
      this.editerData.url=str;
    },
    removeImage:function(file,fileList){
      for(var i=0;i<this.imageList.length;i++){
        if(this.imageList[i].name==file.url){
            this.imageList.splice(i,1);
            break;
        }
      }
      this.uploadSuccess(null,file,fileList)
    }
  },
  props:["editerData"]
}

</script>

<style scoped>


</style>
